<template>
  <div v-loading="listLoading" element-loading-text="加载中..." class="list_blog">
    <el-form inline>
      <el-form-item>
        <el-button type="primary" size="mini" @click="refresh">刷新</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="addArticle">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="reloadLoading" size="mini" @click="releaseArticle">发布</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="name" label="日期"></el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="seeHandle(scope.row)" type="primary" size="mini">查看</el-button>
          <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="文章"
      :visible.sync="dialogDetailVisible"
      width="65%"
      top="5vh"
      @open="dialogDetailOpen"
      :before-close="dialogDetailClose"
    >
      <div v-loading="dialogDetailLoading" element-loading-text="加载中...">
        <el-form label-width="80px" label-position="left">
          <el-form-item label="名称">
            <el-input size="mini" v-model="articleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker
              v-model="articleForm.date"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="标签">
            <el-input size="mini" v-model="articleForm.tags"></el-input>
          </el-form-item>
        </el-form>
        <div class="mde_box">
          <MDE v-model="articleForm.content" :init-value="customInitialValue"></MDE>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogDetailClose">取 消</el-button>
          <el-button type="primary" @click="articleDetailSave">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
    getArticleList,
    getArticleDetail,
    articleEdit,
    articleDelete,
    articleRelease
} from '@/api/article';
import MDE from '@/components/mde.vue';
export default {
    data() {
        return {
            tableData: [],
            dialogDetailVisible: false,
            dialogDetailLoading: false,
            listLoading: false,
            fileName: null,
            articleForm: {
                name: '',
                tags: '',
                date: '',
                content: ''
            },
            customInitialValue: '',
            reloadLoading: false
        };
    },
    components: {
        MDE
    },
    created() {
        this.getArtcleData();
    },

    methods: {
        releaseArticle() {
            this.reloadLoading = true;
            articleRelease()
                .then(res => {
                    this.$message({
                        message: res.m,
                        type: 'success'
                    });
                })
                .catch()
                .finally(() => {
                    this.reloadLoading = false;
                });
        },
        articleDetailSave() {
            console.log(this.articleForm);
            let data = this.articleForm;
            articleEdit(data)
                .then(res => {
                    this.$message({
                        message: res.m,
                        type: 'success'
                    });
                    this.dialogDetailVisible = false;
                    this.getArtcleData();
                })
                .catch(err => {});
        },
        dialogDetailOpen() {},
        dialogDetailClose() {
            this.fileName = '';
            this.articleForm = {
                name: '',
                tags: '',
                date: '',
                content: ''
            };
            this.customInitialValue = '';
            this.dialogDetailVisible = false;
        },
        deleteHandle(row) {
            let { name } = row;
            console.log(name);
            if (!name) {
                return;
            }
            articleDelete(name)
                .then(res => {
                    this.$message({
                        message: res.m,
                        type: 'success'
                    });
                    this.getArtcleData();
                })
                .catch();
        },
        seeHandle(row) {
            let { name } = row;
            if (!name) {
                return;
            }
            this.fileName = name;
            this.dialogDetailVisible = true;
            this.getArticleDetail();
        },
        addArticle() {
            this.fileName = '';
            this.dialogDetailVisible = true;
        },
        refresh() {
            this.getArtcleData();
        },
        getArticleDetail() {
            this.dialogDetailLoading = true;
            let fileName = this.fileName;

            getArticleDetail(fileName)
                .then(res => {
                    this.articleForm = res.d;
                    this.customInitialValue = res.d.content;
                })
                .finally(() => {
                    this.dialogDetailLoading = false;
                });
        },
        getArtcleData() {
            this.listLoading = true;
            getArticleList()
                .then(res => {
                    this.tableData = res.d;
                })
                .catch(err => {
                    console.log(err);
                })
                .finally(() => {
                    this.listLoading = false;
                });
        }
    }
};
</script>

<style  lang='scss'>
.list_blog {
    width: 100%;
    height: 100%;
    .mde_box {
        height: 32vh;
        overflow: auto;
    }
}
</style>
